<template>
    <el-dialog :model-value="show" title="分配角色" @close="emit('hide')">
      <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input
            v-model="form.description"
            :rows="4"
            type="textarea"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="form.status" class="ml-4">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button>取消</el-button>
          <el-button type="primary" @click="submitFn">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  <script setup lang="ts">
  import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
  import { reactive, ref, watch } from "vue";
  import { cerateRoleAPI, getRoleListApi, editRolesAPI } from "./api";
  
  const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
      default: 0,
    },
  });
  
  // 传一个自定义属性的对象类型给组件的方法
  // interface IProp{
  //     data:IRoleModel
  // }
  // const prop=withDefaults(defineProps<IProp>(),{})
  
  const emit = defineEmits(["hide"]);
  
  const form = reactive<IRoleList>({
    description: "",
    name: "",
    status: 1,
  });
  const rules = {
    name: [{ required: true, trigger: "blur", message: "请填写角色名称" }],
  };
  const formRef = ref<FormInstance>();
  
  watch(
    () => props.id,
    () => {
      if (props.id !== 0) {
        console.log(props.id);
        getRoleListApi().then((res) => {
          console.log(res);
          if (res.code === 200) {
            res.data.forEach((item) => {
              if (item.id === props.id) {
                Object.assign(form, item);
              }
            });
          }
        });
      }
    }
  );
  
  const addRole = () => {
    ElMessageBox.confirm("确定要添加此角色吗？", "添加角色", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        cerateRoleAPI(form).then((res) => {
          if (res.code === 200) {
            ElMessage.success("添加成功");
            formRef.value?.resetFields();
            emit("hide", true);
          }
        });
        console.log(form);
      })
      .catch(() => {});
  };
  const editRole = () => {
    ElMessageBox.confirm("确定要修改此用户吗？", "添加用户", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        console.log(props.id);
        editRolesAPI(props.id, form).then((res) => {
          if (res.code === 200) {
            ElMessage.success("修改成功");
            formRef.value?.resetFields();
            emit("hide", true);
          }
        });
      })
      .catch(() => {});
  };
  const submitFn = () => {
    formRef.value?.validate((ok: boolean) => {
      if (ok) {
        if (props.id === 0) {
          addRole();
        } else {
          editRole();
        }
      } else {
        // 提示
      }
    });
  };
  </script>
  <style lang="less" scoped></style>
  